Day4 金魚 稀飯版+蓋版廣告

簡單小語

這次多練習了偽元素before跟after，還記得當初看到Amos老師用這個功能，真的是一頭霧水看不懂，也很好奇這到底是什麼，是真的一臉黑人問號跟心理海枯石爛，完全看到烏托邦世界一樣的無語，後續發現真的很好用也很實用(各種奇怪樣式都做出來)，搭配上定位功能，幾乎可以做各種延伸應用，也順便開端一下JQuery，比起JavaScript稍微好懂一點，事件的觸發及結束，刻意練習就是審視過去自己的撰寫方式，正視現在自己的製作方式與差異，從刻意練習發現更多自己不熟悉的地方，更多需要改善的地方，小魯有天也能變大魯(喂喂喂ing)。

筆記分享

1. RWD還是得做(必備技能，從手機(320px)開始延伸到電腦(960px))。
2. before跟after的使用，更加了解其應用及延伸方式，無中生有太牛逼啦!!!。
3. 綜合position fixed + relative + absolute製作的蓋版廣告，我定你你定他他定視窗。
4. hover可以利用消失出現的方式帶入些微動畫(.slogan .h2)。
5. 這次將手機版logo放置正中間，須留意li及a的空間排版。
6. 麵包屑應用，間格位置算好即可使用before跟after新增內容，你看看想生就生出來。
7. 這次比Day 3更重視每個元素的padding及margin的使用，細心再細心(雖然還是頗醜)。
8. flex的justify-content及align-item，釐清主軸對齊，次軸對齊當然還有資料流向。
9. 蓋版廣告記得要讓使用者可以關掉(關不掉怎麼看謎片….玄謎的影片啦!!!)，符合正常使用情境(使用什麼?)。
10. max-width: 1024px，讓縮放時可以自適應延伸(看應用使用%或max)。

刻意練習

Practice(200715 Day 4)

首次練習

Practice(200521_稀飯版+蓋版廣告)

2020 iT邦幫忙鐵人賽 Day4 網頁前端-刻意練習(稀飯版+蓋版廣告)